<template>
  <div class="searlist">
    <!--    头部导航-->
    <van-nav-bar left-arrow title="商品列表" @click-left="$router.back()" />
    <!--    搜索-->
    <van-search
      v-model="searname"
      :value="querySearch || '搜索商品'"
      background="#ffffff"
      readonly
      shape="round"
      show-action
      @click="$router.push('/search')"
    >
      <template #action>
        <van-icon class="tool" icon-size="30px" name="apps-o" />
      </template>
    </van-search>
    <!--    排序-->
    <div class="sort">
      <van-tabs v-model="sortType" @change="onSearch1">
        <van-tab name="all" title="综合"></van-tab>
        <van-tab name="sales" title="销量"></van-tab>
        <van-tab name="price" title="价格"></van-tab>
      </van-tabs>
    </div>
    <!--    商品列表-->
    <div class="sear-list">
      <GoodsItem1
        v-for="item in selist"
        :key="item.goods_id"
        :item="item"
      ></GoodsItem1>
    </div>
  </div>
</template>
<script>
import GoodsItem1 from '@/components/GoodsItem1.vue'
import { proList } from '@/api/searchlist'

export default {
  name: 'searchList',
  props: {
    item: Object
  },

  components: { GoodsItem1 },
  data () {
    return {
      searname: this.$route.query.search,
      page: 1,
      selist: [],
      sortType: 'all'
    }
  },
  computed: {
    querySearch () {
      return this.searname
    }
  },
  methods: {
    async onSearch () {
      const {
        data: {
          data: { list }
        }
      } = await proList({
        goodsName: this.querySearch,
        page: this.page
      })
      this.selist = list.data
    },
    onSearch1 () {
      this.onSearch()
    }
  },
  created () {
    this.onSearch()
  }
}
</script>
<style lang="less">
.searlist {
  .tool {
    font-size: 24px;
    height: 40px;
    line-height: 40px;
  }

  //.sort {
  //  display: flex;
  //  justify-content: space-around;
  //}

  .goods-list {
    background-color: #f6f6f6;
  }

  .sear-list {
    display: flex;
    justify-content: space-around;
    background-color: rgba(192, 192, 192, 0.2);
    height: 100vh;
  }
}
</style>
